<template>
  <div id="app">
    <!-- 主页 -->
    <router-view></router-view>
    <!-- 底部导航区 -->
    <van-tabbar v-model="active">
      <van-tabbar-item
        name="index"
        :icon="
          require(`../assets/baking_log/xhp_${active == 'index' ? 1 : 0}.png`)
        "
      >
        学烘焙
      </van-tabbar-item>
      <van-tabbar-item
        name="show"
        :icon="
          require(`../assets/baking_log/hpq_${active == 'show' ? 1 : 0}.png`)
        "
      >
        烘焙圈
      </van-tabbar-item>
      <van-tabbar-item
        name="question"
        :icon="
          require(`../assets/baking_log/tw_${active == 'question' ? 1 : 0}.png`)
        "
      >
        问答
      </van-tabbar-item>
      <van-tabbar-item
        :name="userInfo ? 'client' : 'login'"
        :icon="
          require(`../assets/baking_log/xw_${active == 'client' ? 1 : 0}.png`)
        "
      >
        小窝
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["userInfo"]),
  },
  data() {
    return {
      active: this.$route.path.split("/").pop(),
    };
  },
  watch: {
    active() {
      this.$router.push(`/${this.active}`);
    },
  },
};
</script>

<style scoped>
:deep(.van-tabbar-item--active) {
  color: #ff7f24;
}
</style>

<style lang="scss">
body {
  background-color: rgb(245, 247, 249);
}
</style>
